<template>
  <!-- 发起人 -->
  <el-drawer :append-to-body="true" title="节点属性" v-model="visible" custom-class="set_promoter" :show-close="true"
    :size="550" :before-close="savePromoter">
    <div class="demo-drawer__content">
      <section>
        <p @click="testemit">节点名称： 发起人</p>
        <br />
        <div class="flex">
          <span class="alink">表单直退操作权限</span>
          <el-popover placement="bottom" width="300" trigger="hover" effect="dark">
            <template #reference>
              <div>
                <el-icon style="size: 14px; color: #5086fc; margin-left: 10px">
                  <QuestionFilled />
                </el-icon>
              </div>
            </template>
            <template #default>
              <div>
                <p>
                  审批人选择退回重填-直送至我时，发起人的编辑和必填获取当前配置，控制表单的编辑和必填校验。
                </p>
                <p>注：配置编辑的字段不能配置自动流程分支条件字段。</p>
              </div>
            </template>
          </el-popover>
        </div>
        <div class="tabline"></div>
        <div class="mytable">
          <div class="tablerow tableheader">
            <div>主表字段</div>
            <div>查看</div>
            <div>编辑</div>
            <div>隐藏</div>
          </div>
          <div class="tablebody tablerow" v-for="(item, index) in radio" :key="item.name"
            :class="index % 2 == 0 ? 'graybg' : ''">
            <div>
              <div>{{ item.name }}</div>
            </div>
            <div>
              <div class="checkmode" :class="item.check ? 'checkmodeactive' : ''" @click="item.check = !item.check"></div>
            </div>
            <div>
              <div class="checkmode" :class="item.edit ? 'checkmodeactive' : ''" @click="item.edit = !item.edit"></div>
            </div>
            <div>
              <div class="checkmode" :class="item.hide ? 'checkmodeactive' : ''" @click="item.hide = !item.hide"></div>
            </div>
          </div>
        </div>
        <div class="mytable">
          <div class="tablerow tableheader">
            <div>明细表字段</div>
            <div>查看</div>
            <div>编辑</div>
            <div>隐藏</div>
          </div>
          <div class="tablebody tablerow" v-for="(item, index) in radio" :key="item.name"
            :class="index % 2 == 0 ? 'graybg' : ''">
            <div>
              <div>{{ item.name }}</div>
            </div>
            <div>
              <div class="checkmode" :class="item.check ? 'checkmodeactive' : ''" @click="item.check = !item.check"></div>
            </div>
            <div>
              <div class="checkmode" :class="item.edit ? 'checkmodeactive' : ''" @click="item.edit = !item.edit"></div>
            </div>
            <div>
              <div class="checkmode" :class="item.hide ? 'checkmodeactive' : ''" @click="item.hide = !item.hide"></div>
            </div>
          </div>
        </div>
      </section>

      <div class="demo-drawer__footer clear">
        <el-button type="primary" @click="savePromoter">确 定</el-button>
        <el-button @click="closeDrawer">取 消</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script setup>
import employeesDialog from "../dialog/employeesDialog.vue";
import $func from "../../plugins/preload";
import { mapState, mapMutations } from "../../plugins/lib";
import { computed, ref, watch, defineEmits } from "vue";
import { workFlowStoreHook } from "@/store/modules/workflow";
import { storeToRefs } from "pinia";
let flowPermission = ref([]);
let promoterVisible = ref(false);
let checkedList = ref([]);
let workFlowStore = workFlowStoreHook();
let { promoterDrawer, flowPermission1 } = storeToRefs(workFlowStoreHook());
let tableData = ref({});
let radio = ref([
  {
    name: "[主表]申请人",
    check: false,
    edit: true,
    hide: false
  },
  {
    name: "[主表]部门",
    check: false,
    edit: true,
    hide: false
  },
  {
    name: "[主表]人员",
    check: true,
    edit: true,
    hide: false
  }
]);
// let { promoterDrawer, flowPermission1 } = mapState();
let visible = computed({
  get () {
    return promoterDrawer.value;
  },
  set () {
    closeDrawer();
  }
});
watch(flowPermission1, val => {
  flowPermission.value = val.value;
});

// let { setPromoter, setFlowPermission } = mapMutations();

const addPromoter = () => {
  checkedList.value = flowPermission.value;
  promoterVisible.value = true;
};
const surePromoter = data => {
  flowPermission.value = data;
  promoterVisible.value = false;
};
const savePromoter = () => {
  workFlowStoreHook().setFlowPermission({
    value: flowPermission.value,
    flag: true,
    id: flowPermission1.value.id
  });
  closeDrawer();
};
const closeDrawer = () => {
  workFlowStoreHook().setPromoter(false);
};
const emits = defineEmits(["gotest"]);
const testemit = () => {
  emits("gotest", 1, 2);
};
</script>
<style lang="scss">
.set_promoter {
  font-size: 14px;

  .promoter_content {
    padding: 0 20px;

    .el-button {
      margin-bottom: 20px;
    }

    p {
      padding: 18px 0;
      font-size: 14px;
      line-height: 20px;
      color: #000000;
    }
  }

  .el-drawer__title {
    font-size: 20px;
    color: #333;
  }

  .el-drawer__header {
    padding-bottom: 16px;
    border-bottom: 1px solid #eee;
    margin-bottom: 0;
  }

  .alink {
    color: #5086fc;
  }

  .flex {
    display: flex;
  }

  .tabline {
    width: 70px;
    height: 4px;
    background: #5086fc;
    border-radius: 3px;
    margin: 6px 0 0 18px;
  }

  .mytable {
    margin: 16px 0;

    .tablerow {
      display: flex;
      width: 100%;
      height: 48px;

      >div {
        flex: 1;
        line-height: 48px;
        text-align: center;
        position: relative;
      }
    }

    .tableheader {
      background: #eff2fa;
      border-radius: 4px 4px 0px 0px;
    }

    .el-radio-group {
      width: 100%;
    }

    .tablebody {}

    .checkmode {
      height: 16px;
      width: 16px;
      border: 4px solid #ddd;
      border-radius: 16px;
      position: absolute;
      left: calc(50% - 8px);
      margin-top: 15px;
      cursor: pointer;
    }

    .checkmodeactive {
      border: 4px solid #5086fc;
    }

    .graybg {
      background: #faf9f9;
    }
  }
}
</style>
